<script setup>
import { ref } from 'vue'
import {useRouter} from 'vue-router'
// 1. 先导入图片资源
import avatar01 from '@/assets/images/test_avatar01.jpg'
import avatar02 from '@/assets/images/test_avatar02.jpg'

const topstorylist = ref([
    {
        img: avatar01, // 2. 使用导入的图片变量
        name: '刘先生',
        title: '良好效果',
        article_item: '在华东理工大学奉贤校区举行，以 “琴棋书画、诗酒花茶” 等传统文化项目为主题，设有春华探秘园、春韵匠心坊、春味食光集 3 个区域。通.',
        id: 1,
        favour: 33,
        like_prefer:false,
        like_praise:false,
    },
    {
        img: avatar02, 
        name: '王小姐',
        title: '团支部',
        article_item: '团支部积极组织社会实践活动。开展龙亭区志愿活动，组织团员参与社区服务、环保行动等。在社区服务中，团员们为居民提供义务维修、文化辅导等服务，受到社区居民的广泛好评；环保行动中，团员们走进公园、街道，进行垃圾分类宣传和垃圾清理，增强了居民的环保意识。这些活动不仅提升了团员的社会责任感，也树立了团支部良好的社会形象。此外，年度总结大会上，团员们共同回顾一年的工作和学习成果，总结经.',
        id: 2,
        favour: 36,
        like_praise:false,
        like_prefer:false
    }
    ,
    {
        img: avatar02, 
        name: '李小姐',
        title: '乐宝币',
        article_item: '由上海杨浦区建设小学举办，源于少代会提案。少先队员们将家中闲置物品带到学校进行 “二次销售”，通过设计宣传海报、制作 “乐宝币”、摆出特色造型等方式，让闲置物品发挥更大价值。同学们在活动中体验了买卖过.',
        id: 3,
        favour: 36,
        like_praise:false,
        like_prefer:false
    }
    ,
    {
        img: avatar02, 
        name: '行老师',
        title: '让作品走向社会',
        article_item: '天津职业技术师范大学携手天津师范大学等五所高校，于天津保利广场共同举办。以 “让作品走向社会，用市场检验价值” 为主题，.',
        id: 4,
        favour: 36,
        like_praise:false,
        like_prefer:false
    }
    ,
    {
        img: avatar02, 
        name: '比先生',
        title: '学生摊位',
        article_item: '：现场设置了 80 余个学生摊位，涵盖文创手作、特色美食、环保用品等领域。学生们将兴趣变为创业实践，如售卖自己制作的小玩偶、家乡特产等。该校还计划建成 “固定市集”+“无人市集”+“流动市集” 立体交叉模式',
        id:5,
        favour: 36,
        like_praise:false,
        like_prefer:false
    }
    
])
//跳转到详情页
const dialogVisible = ref(false)
const router = useRouter()
function goDetails(v){
    router.push('/home/details')
}
const handleClose = (done) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
            // 用户点击确定，调用 done 函数
            done();
        })
      .catch(() => {
            // 用户点击取消，捕获错误但不做额外处理
        });
};
</script>

<template>
<div class="Topstory-content">
    <ul style="list-style-type: none;">
        <li v-for="v in topstorylist" :key="v.id">
            <div @click="goDetails(v)">
                <div class="topstory-hd">
                    <!-- 3. 正确绑定图片路径 -->
                    <img :src="v.img" :alt="v.name">
                    <span>{{ v.name }}</span>
                </div>
                <h2 class="topstory-title">{{ v.title }}</h2>
                <div class="topstory-article_item"> 
                   {{ v.article_item }}
                </div>
            </div>
            
            <div class="topstory-actions">
                <ul style="list-style-type: none;">
                    <li :class ="v.like_praise?'approve-like ':''" @click="v.like_praise =!v.like_praise">
                        <div>
                            <i class="iconfont icon-dianzan"></i>点赞{{  v.like_praise?v.favour+1:v.favour }}
                        </div>
                    </li>
                    <li>
                        <i class="iconfont icon-pinglun"></i>
                        <span>评论</span>
                    </li>
                    <li>
                        <i class="iconfont icon-fenxiang"></i>
                        <span>分享</span>
                    </li>
                    <li :class ="v.like_prefer?'approve-like ':''" @click="v.like_prefer=!v.like_prefer">
                        <i class="iconfont icon-follow-fill"></i>
                        <span>{{v.like_prefer?'取消喜欢':'喜欢'}}</span>
                    </li>
                    <li @click ="dialogVisible = true">
                        <i class="iconfont icon-jubao"></i>
                        <span>举报</span>
                    </li>
                    
                </ul>
            </div>
        </li>
    </ul>
    <!-- 对话框 -->
    <el-dialog
        v-model="dialogVisible"
        title="举报"
        width="50%"
        height=700px
        :before-close="handleClose"
    >
        <span>请选择要举报的类型</span>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <!-- //触发一个点击事件 -->
            <el-button type="primary" @click="dialogVisible = false">
            确认
            </el-button>
        </div>
        </template>
  </el-dialog>
</div>
</template>